<template>
	<SectionFrame :title="title" :more="true">
	  <template #default>
		  <!--next-margin：后边距，用于露出后面一小部分  -->
	    <swiper
	      class="section-card__songs"
	      easing-function="easeOutCubic"
	      :indicator-dots="false"
	      :autoplay="false"
	      :duration="500"
	      next-margin="58rpx"
	    >
	      <!-- 一列歌曲（三行） -->
	      <swiper-item
	        v-for="(column, columnIdx) in data.list"
	        :key="`songs-page-${columnIdx}`"
	        class="songs-column"
	      >
	        <view
	          @tap.stop.prevent="tapHandler(columnItem)"
	          class="songs-column-item"
	          v-for="(columnItem, columnIdx) in column"
	          :key="`songs-item-${columnIdx}`"
	        >
	          <image
	            v-if="columnItem.picUrl"
	            class="songs-column-item-poster"
	            :src="`${columnItem.picUrl}?param=100y100`"
	            mode="aspectFit"
	          />
	          <view class="songs-column-item-info">
	            <view class="songs-title text-ellipsis-single">
	              <text class="songs-title-name text-ellipsis-single">{{ columnItem.title }}</text>
	              <text class="songs-title-artist text-ellipsis-single">
	                &nbsp;-&nbsp;{{ columnItem.artist }}
	              </text>
	            </view>
	            <view class="songs-subTitle text-ellipsis-single">
	              <view class="songs-tags text-ellipsis-single" v-if="columnItem.tags">{{
	                columnItem.tags
	              }}</view>
	              <text class="songs-main text-ellipsis-single">{{ columnItem.subTitle }}</text>
	            </view>
	          </view>
	          <view v-if="columnItem.mv" :data-id="columnItem.mv" class="songs-column-item-video" />
	        </view>
	      </swiper-item>
	    </swiper>
	  </template>
	</SectionFrame>
</template>

<script>
	export default {
		name:"SectionSonglist",
		data() {
			return {
				
			};
		},
		props:{
			title: {
			      type: String,
			      required: true
			    },
			data: {
			      type: Object,
			      default: function() {
			        return {
			          list: [],
			          scrollList: []
			        };
			      }
			    },
		},
		methods:{
			tapHandler(e) {
			  // 添加歌曲信息到播放器
			  this.$store.dispatch('player/setPlayerInfo',e.payload)
			  // 打开播放器
			  uni.navigateTo({
			    url: `/pages/player/player?type=poster&payload=${e.payload}`
			  })
			}
		}
	}
</script>

<style lang="scss" scoped>
.section-card__songs {
  height: calc((92rpx + 24rpx) * 3);
  margin-top: 12rpx;

  .songs-column {
    margin-left: var(--page-spacing);
    .songs-column-item {
      display: flex;
      align-items: center;
      position: relative;
      width: 100%;

      // 歌曲封面
      .songs-column-item-poster {
        flex-shrink: 0;
        height: 92rpx;
        width: 92rpx;
        position: relative;
        border-radius: 8rpx;
        // &::before {
        //   content: '';
        //   position: absolute;
        //   top: 0;
        //   left: 0;
        //   height: 92rpx;
        //   width: 92rpx;
        //   z-index: 2;
        //   background-image: linear-gradient(rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.1));
        // }
        &::after {
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          // height: 92rpx;
          // width: 92rpx;
          width: 100%;
          height: 100%;
          z-index: 1;
          background-color: rgba(255, 255, 255, 0.8);
          mask-image: url('@/static/icon-play-square.png');
          mask-size: 24rpx;
          mask-position: center;
          mask-repeat: no-repeat;
        }
      }

      // 歌曲描述
      .songs-column-item-info {
        margin-right: 38rpx;
        margin-left: 16rpx;
        // width: 545rpx;
        width: calc(100% - 92rpx - 54rpx);
        height: 92rpx;
        padding: 12rpx 0;
        border-bottom: 1px solid var(--theme-border-color);
        display: flex;
        flex-direction: column;
        justify-content: center;
        line-height: 1.6;

        //  标题
        .songs-title {
          color: rgb(150, 150, 150);
          padding-right: 72rpx;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          flex-shrink: 0;

          .songs-title-name {
            font-size: 30rpx;
            font-weight: 600;
            color: var(--theme-text-title-color);
          }
          .songs-title-artist {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            font-size: 24rpx;
            font-weight: 400;
            color: rgb(150, 150, 150);
          }
        }
        .songs-subTitle {
          display: flex;
          align-items: center;
          padding-right: 72rpx;
          //tags
          .songs-tags {
            font-size: 16rpx;
            padding: 4rpx 10rpx;
            line-height: 30rpx;
            background-color: rgba(201, 113, 73, 0.1);
            color: #ff7c3a;
            display: inline-block;
            margin-right: 10rpx;
            border-radius: 4rpx;
          }
          // 小标题
          .songs-main {
            font-size: 20rpx;
            color: rgb(150, 150, 150);
          }
        }
      }

      // 播放按钮
      .songs-column-item-video {
        height: 48rpx;
        width: 48rpx;
        position: absolute;
        right: 48rpx;
        top: 50%;
        transform: translate(0, -50%);
        background-color: rgb(180, 180, 180);
        mask-image: url('@/static/t_actionbar_video_selected.png');
        mask-position: center;
        mask-repeat: no-repeat;
        mask-size: 80%;
      }
    }
  }
}
</style>